<template>
    <div class="box">
      <van-swipe :autoplay="3000" lazy-render class="index">
        <van-swipe-item v-for="image in images" :key="image">
          <a>
            <img :src="image" class="single" />
          </a>
        </van-swipe-item>
      </van-swipe>
    </div>
</template>

<script>
export default {
  name: 'Swiper',
  setup() {
    const images = [
      require('../../../assets/img/s1.webp'),
      require('../../../assets/img/s2.webp'),
      require('../../../assets/img/s3.webp'),
      require('../../../assets/img/s4.webp'),
      require('../../../assets/img/s5.webp'),
    ];
    return { images };
  }
}
</script>

<style lang='scss' scoped>
.box{
  overflow: hidden;
  transform: translateY(0);
  border-radius: 1.9rem;
}
.index {
  width: 100%;
  height: 15rem;
  border-radius: 1.9rem;
  .single{
    width: 100%;
    height: 15rem;
  }
}

</style>
